// index.js 首页
import { getMultiData, getGoodsData } from "../../service/home";

const types = ['pop', 'new', 'sell']
const TOP_DISTANCE = 500

Page({

  /**
   * 页面的初始数据
   */
  data: {
    banners: [],
    recommends: [],
    titles: ["流行", "新款", "精选"],
    // 请求数据模型
    goods: {
      pop: {page: 0, list: []},
      new: {page: 0, list: []},
      sell: {page: 0, list: []},
    },
    goodlist: [],
    currentType: 'pop',
    showBackTop: false,
    isTabFixed: false,
    tabScrollTop: 0
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // 1. 请求轮播图及推荐数据
    this._getMultidata()

    // 2. 请求商品数据
    this._getGoodsData('pop')
    this._getGoodsData('new')
    this._getGoodsData('sell')
  },
  onShow() {
    // setTimeout(() => {
    //   // 之所以要加个定时器，是因为要等页面的数据请求完成了，再去计算组件距离顶部的真正高度。因为有些数据没有加载完成的话(比如推荐数据)，就不会占据页面的高度，而此时计算的组件距离顶部的高度自然也是不准确的。
    //   // 但是这种方法也不是完美的解决方法！
    //   // 最后的解决方法是检测出哪一part的数据请求会给求高度带来延迟，从而去监听这一part
    //   wx.createSelectorQuery().select('#tab-control').boundingClientRect(rect => {
    //     console.log(rect);
    //   }).exec()
    // }, 1000);
  },

  /**
   * 私有的封装函数
   */
  _getMultidata() {
    getMultiData().then(res => {
      // 取出轮播图以及推荐数据
      const banners = res.data.data.banner.list.map(item => item.image)
      const recommends = res.data.data.recommend.list
      // 将 banners recommends 放到data中
      this.setData({
        banners,
        recommends
      })
    }).catch(err => {
      console.log(err);
    })
  },
  _getGoodsData(type) {
    // 获取页码
    const page = this.data.goods[type].page + 1

    // 发送网络请求
    getGoodsData(type, page).then(res => {
      // 2.1 从接口中取出数据
      const list = res.data.data.list

      // 2.2 将数据设置到对应type的list中
      // 取出对应type的list数组
      const oldList = this.data.goods[type].list
      // 将获取到的数据压进取出的list数组
      oldList.push(...list)

      // 2.3 将压数据完成的oldList替换掉data中的goods对应type中的list
      // 这样就会既得到最新的数据，又可以对数据进行即使的渲染
      const typeKey = `goods.${type}.list`
      const pageKey = `goods.${type}.page`
      this.setData({
        // 因为typeKey是字符串 所以需要加[]
        [typeKey]: oldList,
        [pageKey]: page
      })
    })
  },
  handleTabClick(e) {
    // console.log(e);
    const index = e.detail.index 
    this.setData({
      currentType: types[index]
    })
    // console.log(this.data.currentType);
  },
  // 监听推荐数据组件中的图片加载完成
  handleImageLoad() {
    wx.createSelectorQuery().select('#tab-control').boundingClientRect(rect => {
      // console.log(rect.top);
      this.setData({
        tabScrollTop: rect.top
      })
    }).exec()
  },


  /**
   * 页面滚动到底部
   */
  onReachBottom() {
    // 加载更多
    this._getGoodsData(this.data.currentType)
  },

  /**
   * 监听页面滚动
   */
  onPageScroll(options) {
    const scrollTop = options.scrollTop

    // 官方建议 => 不要在滚动的函数中频繁的调用 this.setData
    // 因为在 onPageScroll 这个生命周期函数中，滚轮没动一下就会让页面重新进行一次渲染，这带来的性能损耗是非常大的。因此我们应该想办法尽可能的节省计算
    // 所以在this.setData外判断一个flag值，然后再跟data中的showBackTop进行比较，如果不相等再改变值，这在一定程度上可以减少页面的计算
    const flag1 = scrollTop >= TOP_DISTANCE
    if(flag1 !== this.data.showBackTop){
      this.setData({
        showBackTop: flag1
      })
    }

    // 修改 isTabFixed 属性
    const flag2 = scrollTop >= this.data.tabScrollTop
    if (flag2 !== this.data.isTabFixed){
      this.setData({
        isTabFixed: flag2
      })
    }
  }
})